<!-- 检测点管理 -->
<template>
	<view class="no-warpper">
		<!-- 添加检测点 -->
		<view class="add-place-box">
			<view class="btm" @click="addPlaceShow = true" v-if="!addPlaceShow">
				<u-icon name="plus-circle" color="#2979ff" size="40"></u-icon>
				<text>创建核酸检测点</text>
			</view>
			<view class="add-from" v-show="addPlaceShow">
				<view class="nl-flex-list">
					<text class="nl-margin-right">创建核酸检测点</text>
					<view class="right" style="color:#dd524d;font-size: 28rpx;" @click="addPlaceShow = false">取消</view>
				</view>
				<view class="nl-flex-list">
					<text class="nl-margin-right">名称</text>
					<u-input class="input" v-model="params.name" type="text" placeholder="请输入检测点名称" />
				</view>
				<view class="set-up" @click="saveNucleicSite()">立即创建</view>
			</view>

		</view>
		<!-- 列表 -->
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view v-if="updateItem.id != item.id"  class="content">
					<text class="name">{{item.name}}</text>
					<!-- 按钮 -->
					<view class="botton-flex">
						<view class="button-mini red">
							<button @click="deleteNucleicSite(item)">删除</button>
						</view>
						<view class="button-mini main m8">
							<button @click="updateNucleicSite(item)">修改</button>
						</view>
					</view>
				</view>
				
				<view class="content" v-else>
					<view class="flex-list">
						<text class="nl-margin-right">名称</text>
						<u-input class="input" v-model="updateItem.name" type="text" placeholder="请输入检测点名称" />
					</view>
					<view class="botton-flex" style="justify-content: flex-end;">
						<view class="button-mini red">
							<button @click="updateItem = {}">取消</button>
						</view>
						<view class="button-mini main m8">
							<button @click="updateConfirm()">确认</button>
						</view>
					</view>
				</view>
				
			</view>
		</view>
		<u-toast ref="uToast" />
		<u-modal v-model="deleteShow" @confirm="deleteConfirm" ref="uModal" :content="deleteContent" show-cancel-button></u-modal>
		<u-modal v-model="deleteRelationShow" @confirm="deleteRelationConfirm" ref="uModal" :content="deleteRelationContent" show-cancel-button></u-modal>
		<view class="mask" v-if="maskShow"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		saveNucleicSite,
		updateNucleicSite,
		deleteNucleicSite,
		queryNucleicSite,
	} from '@/api/nucleic.js';
	export default {
		data() {
			return {
				maskShow: false, // 是否显示遮罩

				addPlaceShow: false,

				// 删除检测点
				deleteShow: false,
				deleteId: '',
				deleteName: '',
				deleteContent: '',

				// 更新检测点
				updateItem: {},

				params: {
					name: '',
					communityId: ''
				},
				list: [],

			
				addRelationId:'',
				deleteRelationShow:false,
				deleteRelationContent:'',
			}
		},
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		onLoad() {
		},
		onLoad(option) {
			this.queryNucleicSite()
		},
		methods: {
			/**
			 * 创建检测点
			 */
			saveNucleicSite() {
				this.$refs.uToast.show({
					title: '检测点创建中，请稍等',
					type: 'default',
					icon: false
				})
				
				if (!this.params.name) {
					uni.showToast({
						title: "请输入检测点名称",
						icon: "none",
					})
					return
				}
				this.params.communityId = this.userCommunity.communityId
				saveNucleicSite(this.params).then((res) => {
					if(res.code == 0){
						
						this.$refs.uToast.show({
							title: '检测点创建成功',
							type: 'success',
						})
						
						this.params.name = ''
						this.queryNucleicSite()
					}
				}).catch(function(reason) {

				})
			},
			/**
			 * 删除检测点
			 */
			deleteNucleicSite(item) {
				this.deleteShow = true
				this.deleteId = item.id
				this.deleteName = item.name
				this.deleteContent = `是否删除 ${item.name} ?`
			},
			deleteConfirm() {
				this.$refs.uToast.show({
					title:`${this.deleteName}删除中，请稍等`,
					type: 'default',
					icon: false
				})
				this.maskShow = true
				let params = {
					id: this.deleteId,
				}
				deleteNucleicSite(params).then((res) => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: `${this.deleteName} 已删除`,
							type: 'success',
						})
						
						this.queryNucleicSite()
					}
					this.maskShow = false
				}).catch(function(reason) {
					this.maskShow = false
				})
			},
			/**
			 * 修改检测点
			 */
			updateNucleicSite(item) {
				this.updateItem = JSON.parse(JSON.stringify(item))	// 深拷贝
			},
			/**
			 * 确认修改
			 */
			updateConfirm() {
				this.$refs.uToast.show({
					title: '修改中，请稍等',
					type: 'default',
					icon: false
				})
				
				
				updateNucleicSite(this.updateItem).then((res) => {
					if (res.code == 0) {
						this.$refs.uToast.show({
							title: '修改状态成功',
							type: 'success',
						})

						setTimeout(() => {
							this.updateItem = {}
							this.queryNucleicSite()
						}, 1000)
					}else{
						this.$refs.uToast.show({
							title: '修改状态失败',
							type: 'error',
						})
					}
				}).catch(function(reason) {
						this.$refs.uToast.show({
							title: '修改状态失败',
							type: 'error',
						})
				})
			},
			/**
			 * 获取列表
			 */
			queryNucleicSite() {
				let params = {
					page: 1,
					row: 100,
					communityId: this.userCommunity.communityId
				}
				queryNucleicSite(params).then((res) => {
					if (res.code == 0) {
						this.list = res.data
						for (let item of this.list) {
							item['lookRelationState'] = false
						}
					}
				}).catch(function(reason) {

				})
			},
		}
	}
</script>

<style lang="scss">
	.add-place-box {
		border-radius: $nl-border-radius-main;
		overflow: hidden;
		margin-bottom: 32rpx;

		.btm {
			width: 100%;
			height: 92rpx;
			font-size: 28rpx;
			color: $nl-color-main;
			text-align: center;
			background-color: #FFFFFF;
			border-radius: $nl-border-radius-main;
			display: flex;
			align-items: center;
			justify-content: center;
			text{
				margin-left: 8rpx;
			}
		}

		.btm:active {
			background-color: #e6e9ea;
		}

		.add-from {
			width: 100%;
			background-color: #FFFFFF;
		}

		.set-up {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			background-color: $nl-color-main;
			color: #FFFFFF;
			text-align: center;
		}

		.set-up:active {
			background-color: #429eff;
		}
	}

	.list {
		.item {
			padding:32rpx 24rpx;
			width: 100%;
			background-color: #FFFFFF;
			border-radius: $nl-border-radius-main;
			margin-bottom: 32rpx;
			.content {
				width: 100%;
				display: flex;
				align-items: center;
				
				.flex-list{
					display: flex;
					align-items: center;
					flex: 1;
					margin-right:20rpx;
					border-bottom: none;
					padding: 0;
					font-size: 30rpx;
					.input{
						padding: 0 12rpx;
						background-color: #F3F3F3;
						border-radius: $nl-border-radius-main;
					}
				}
				
				.name{
					flex: 1;
					margin-right:36rpx;
					font-size: 36rpx;
				}
				
				.botton-flex{
					display: flex;
				}
				
				
			}
		}
	}
	

	.mask {
		width: 100%;
		height: 100vh;
		position: absolute;
		left: 0;
		top: 0;
		z-index: 2;
	}
</style>
